<template>
	<view class="add-form-container">
		<!-- 表单内容 -->
		<view class="form-content">
			<u-form :model="dataForm" ref="uForm" :rules="rules" label-position="left" label-width="200">
				<!-- 基本信息 -->
				<view class="form-section">
					<view class="section-title">
						<u-icon name="account" size="30" color="#2979ff"></u-icon>
						<text class="title-text">基本信息</text>
					</view>

					<view class="form-card">
						<u-form-item label="预定会议室" prop="roomId" required>
							<view class="picker-container" @click="showRoomPicker">
								<text class="picker-text"
									:class="{'placeholder': !dataForm.roomName}">{{ dataForm.roomName || '请选择预定会议室' }}</text>
								<u-icon name="arrow-right" size="20" color="#c0c4cc"></u-icon>
							</view>
						</u-form-item>
						<u-form-item label="使用单位" prop="departmentId" required>
							<view class="picker-container" @click="showDepartmentPicker">
								<text class="picker-text"
									:class="{'placeholder': !dataForm.departmentName}">{{ dataForm.departmentName || '请选择使用单位' }}</text>
								<u-icon name="arrow-right" size="20" color="#c0c4cc"></u-icon>
							</view>
						</u-form-item>

						<u-form-item label="用户姓名" prop="nickName" required>
							<u-input v-model="dataForm.nickName" placeholder="请输入用户姓名" />
						</u-form-item>

						<u-form-item label="联系电话" prop="mobilephone" required>
							<u-input v-model="dataForm.mobilephone" placeholder="请输入联系电话" type="number" />
						</u-form-item>

						<u-form-item label="参会人数" prop="reserveNums" required>
							<u-number-box v-model="dataForm.reserveNums" :min="1" :max="999" @change="onNumsChange">
							</u-number-box>
						</u-form-item>
						
						<!-- 费用注释 -->
						<!-- <u-form-item label="基础费用" prop="reserPrice">
							<u-input v-model="dataForm.reserPrice" disabled />
						</u-form-item>

						<u-form-item label="项目费用" prop="servicePrice">
							<u-input v-model="dataForm.servicePrice" disabled />
						</u-form-item> -->

						<u-form-item label="备注" prop="description">
							<u-input v-model="dataForm.description" type="textarea" placeholder="请输入备注" height="100" />
						</u-form-item>
					</view>
				</view>

				<!-- 预约时段 -->
				<view class="form-section">
					<view class="section-title">
						<u-icon name="calendar" size="30" color="#2979ff"></u-icon>
						<text class="title-text">预约时段</text>
						<view class="title-action">
							<u-button type="primary" size="mini" @click="showTimeModal">添加时段</u-button>
						</view>
					</view>

					<view class="form-card">
						<view class="time-list" v-if="dataForm.roomTimes && dataForm.roomTimes.length > 0">
							<view class="time-item" v-for="(item, index) in dataForm.roomTimes" :key="index">
								<view class="time-info">
									<text class="time-name">{{ item.Name || '未命名时段' }}</text>
									<view class="time-range">
										<u-icon name="clock" size="14" color="#909399"></u-icon>
										<text class="time-text">{{ formatTimeRange(item) }}</text>
									</view>
								</view>
								<u-icon name="trash" size="35" color="#fa3534" @click="removeTime(index)"></u-icon>
							</view>
						</view>
						<view class="empty-tip" v-else>
							<text>暂无预约时段，请添加</text>
						</view>
					</view>
				</view>

				<!-- 会议服务项目 -->
				<view class="form-section">
					<view class="section-title">
						<u-icon name="server-man" size="30" color="#2979ff"></u-icon>
						<text class="title-text">会议服务项目</text>
						<view class="title-action">
							<u-button type="primary" size="mini" @click="showServiceModal">添加服务</u-button>
						</view>
					</view>

					<view class="form-card">
						<view class="service-list" v-if="dataForm.valueService && dataForm.valueService.length > 0">
							<view class="service-item" v-for="(item, index) in dataForm.valueService" :key="index">
								<view class="service-info">
									<text class="service-name">{{ item.ServiceName }}</text>
									<view class="service-nums">
										<text>数量：</text>
										<u-number-box v-model="item.UnitNum" :min="1" :max="99"
											@change="onServiceNumsChange"></u-number-box>
									</view>
								</view>
								<view class="service-actions">
									<!-- 费用注释 -->
									<!-- <text class="service-price">¥{{ item.UnitPrice * item.UnitNum }}</text> -->
									<u-icon name="trash" size="35" color="#fa3534" @click="removeService(index)"
										class="remove-icon"></u-icon>
								</view>
							</view>
						</view>
						<view class="empty-tip" v-else>
							<text>暂无服务项目，请添加</text>
						</view>
					</view>
				</view>
			</u-form>

			<!-- 底部按钮 -->
			<view class="bottom-action">
				<!-- 费用注释 -->
				<!-- <view class="price-info">
					<text>合计：</text>
					<text class="total-price">¥{{ getTotalPrice() }}</text>
				</view> -->
				<u-button v-if="!dataForm.id" type="primary" @click="submitForm">提交预约</u-button>
				<block v-if="dataForm.status === 1">
					<u-button type="primary" @click="submitForm">更新预约</u-button>
					<u-button type="warning" @click="cancelReserve" v-if="dataForm.id">取消预约</u-button>
				</block>
				<block v-if="dataForm.status === 2">
					<u-button type="primary" @click="submitForm">更新预约</u-button>
					<!-- 费用注释 -->
					<!-- <u-button type="success" text="结算预约" @click="settleReserve" v-if="!dataForm.finStatus"></u-button> -->
					<!-- <u-button type="info" v-if="dataForm.finStatus === 1">查看结算</u-button> -->
				</block>
			</view>
		</view>

		<!-- 添加时段弹窗 -->
		<u-modal v-model="timeModal.show" title="添加预约时段" show-cancel-button confirm-text="确认添加" @confirm="confirmAddTime"
			@cancel="timeModal.show = false">
			<view class="solt-content modal-form">
				<view class="form-item">
					<text class="form-label">日期</text>
					<view class="picker-container" @click="showDatePicker">
						<text class="picker-text"
							:class="{'placeholder': !timeModal.date}">{{ timeModal.date || '请选择预约日期' }}</text>
						<u-icon name="arrow-right" size="20" color="#c0c4cc"></u-icon>
					</view>
				</view>
				<view class="form-item">
					<text class="form-label">时段名称</text>
					<view class="picker-container" @click="showTimeNamePicker">
						<text class="picker-text"
							:class="{'placeholder': !timeModal.name}">{{ timeModal.name || '请选择时段名称' }}</text>
						<u-icon name="arrow-right" size="20" color="#c0c4cc"></u-icon>
					</view>
				</view>
				<view class="form-item">
					<text class="form-label">备注</text>
					<u-input v-model="timeModal.description" placeholder="请输入备注" type="textarea" height="60"></u-input>
				</view>
			</view>
		</u-modal>

		<!-- 添加服务弹窗 -->
		<u-modal v-model="serviceModal.show" title="添加服务项目" show-cancel-button confirm-text="确认添加"
			@confirm="confirmAddService" @cancel="serviceModal.show = false">
			<view class="solt-content modal-form">
				<view class="service-select-list">
					<view class="service-select-item" v-for="(item, index) in serviceOptions" :key="index"
						:class="{'service-selected': selectedServices.includes(item.Id)}"
						@click="toggleServiceSelection(item)">
						<view class="service-select-info">
							<text class="service-select-name">{{ item.ServiceName }}</text>
						</view>
						<view class="service-select-price">
							<!-- 费用注释 -->
							<!-- <text>¥{{ item.UnitPrice }}</text> -->
							<u-icon v-if="selectedServices.includes(item.Id)" name="checkmark" color="#2979ff"
								size="18"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-modal>


		<!-- 日期选择器 -->
		<!-- <u-datetime-picker :show="showDatePickerModal" :minDate="new Date().getTime()" :formatter="formatter"
			mode="date" @confirm="confirmDate">
		</u-datetime-picker> -->
		<u-picker mode="time" v-model="showDatePickerModal" @confirm="confirmDate"></u-picker>
		<!-- 部门选择器 -->
		<tn-select v-model="showDepartmentPickerModal" mode="single" :list="departmentOptions" @confirm="onDepartmentConfirm"></tn-select>

		<!-- 会议室选择器 -->
		<tn-select v-model="showRoomPickerModal" mode="single" :list="meetroomOptions" @confirm="onRoomConfirm"></tn-select>

		<!-- 时段名称选择器 -->
		<u-select v-model="showTimeNamePickerModal" label-name="label" :list="roomtimesOptions" @confirm="onTimeNameConfirm" @cancel="showTimeNamePickerModal = false"></u-select>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				dataForm: {
					id: undefined,
					nickName: '',
					mobilephone: '',
					roomId: '',
					departmentId: '',
					description: '',
					reserPrice: 0,
					servicePrice: 0,
					reserveNums: 1,
					roomTimes: [],
					valueService: []
				},

				// 选项数据
				departmentOptions: [],
				meetroomOptions: [],
				roomtimesOptions: [],
				serviceOptions: [],
				selectedServices: [],

				// 费用规则
				costInfo: {},

				// 添加时段弹窗
				timeModal: {
					show: false,
					name: '',
					date: '',
					beginTime: '',
					endTime: '',
					description: ''
				},

				// 添加服务弹窗
				serviceModal: {
					show: false
				},

				// 日期选择器
				showDatePickerModal: false,
				showDepartmentPickerModal: false,
				showRoomPickerModal: false,
				showTimeNamePickerModal: false,
				datePickerParams: {
					year: true,
					month: true,
					day: true,
					disabledAfter: false
				},

				// 表单验证规则
				rules: {
					departmentId: [{
						required: true,
						message: '请选择使用单位',
						trigger: 'change'
					}],
					nickName: [{
						required: true,
						message: '请输入用户姓名',
						trigger: 'blur'
					}],
					mobilephone: [{
						required: true,
						message: '请输入联系电话',
						trigger: 'blur'
					}],
					roomId: [{
						required: true,
						message: '请选择预定会议室',
						trigger: 'change'
					}]
				}
			}
		},

		onLoad(options) {
			this.getDepartmentData()
			this.getMeetRoomData()
			this.getServiceData()
			if (options.id) {
				this.id = options.id
				this.getReserveDetail()
			}
		},

		methods: {
			// 获取预约详情
			getReserveDetail() {
				this.loading = true

				this.$u.api.getReserveInfo({id:this.id}).then(res => {
					console.log(res)
					this.dataForm = res.data
					this.onRoomChange(res.data.roomId)
				})

			},
			// 获取部门数据
			getDepartmentData() {
				this.$u.api.getDepartmentSelector().then(res => {
					if (res.data) {
						this.departmentOptions = res.data.map(item => {
							return {
								value: item.id,
								label: item.fullName
							}
						})
					}
				})
			},

			// 获取会议室数据
			getMeetRoomData() {
				this.$u.api.getMeetroomSelector().then(res => {
					if (res.data) {
						this.meetroomOptions = res.data.map(item => {
							return {
								value: item.id,
								label: item.fullName
							}
						})
					}
				})
			},

			// 获取服务项目数据
			getServiceData() {
				this.$u.api.getValueServiceList().then(res => {
					if (res.data) {
						this.serviceOptions = res.data.list
					}
				})
			},

			// 部门选择确认
			showDepartmentPicker() {
				if (this.departmentOptions.length === 0) {
					uni.showToast({
						title: '正在加载部门数据',
						icon: 'none'
					})
					return
				}
				this.showDepartmentPickerModal = true
			},

			onDepartmentConfirm(e) {
				const {
					label,
					value
				} = e[0]
				this.dataForm.departmentId = value
				this.dataForm.departmentName = label
				this.showDepartmentPickerModal = false;
			},

			// 会议室选择确认
			showRoomPicker() {
				if (this.meetroomOptions.length === 0) {
					uni.showToast({
						title: '正在加载会议室数据',
						icon: 'none'
					})
					return
				}
				this.showRoomPickerModal = true
			},

			onRoomConfirm(e) {
				const {
					label,
					value
				} = e[0]
				this.dataForm.roomId = value
				this.dataForm.roomName = label
				this.onRoomChange(value)
				this.showRoomPickerModal = false;
			},

			// 会议室变更
			onRoomChange(val) {
				if (!val) return
				// 获取计费规则
				this.$u.api.getCostRuleInfoByRoomId({id:val}).then(res => {
					if (res.data) {
						this.costInfo = res.data
						if (this.costInfo.CostType == 2) {
							// 按次计费
							this.dataForm.reserPrice = this.costInfo.Price
						} else {
							// 按时间计费，重新计算
							this.updatePrice()
						}
					}
				})

				// 获取时段选项
				this.$u.api.getRoomTimeByRoomId({roomId:val}).then(res => {
					if (res.data) {
						this.roomtimesOptions = res.data.map(item => {
							return {
								value: item.Id,
								label: item.Name,
								startTime: item.StartTime,
								endTime: item.EndTime
							}
						})
					}
				})
			},

			// 时段名称选择确认
			showTimeNamePicker() {
				if (this.roomtimesOptions.length === 0) {
					uni.showToast({
						title: '请先选择会议室',
						icon: 'none'
					})
					return
				}
				this.showTimeNamePickerModal = true
			},

			onTimeNameConfirm(e) {
				const time = e[0]
				const selectedTime = this.roomtimesOptions.find(item => item.value === time.value)
				if (selectedTime) {
					this.timeModal.name = selectedTime.label
					this.timeModal.beginTime = selectedTime.startTime
					this.timeModal.endTime = selectedTime.endTime
				}
				this.showTimeNamePickerModal = false;
			},

			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},

			// 人数变更
			onNumsChange(value) {
				this.dataForm.reserveNums = value.value
			},

			// 服务数量变更
			onServiceNumsChange(e) {
				this.$nextTick(() => {
					this.updateServicePrice()
				});
			},

			// 显示日期选择器
			showDatePicker() {
				this.showDatePickerModal = true
			},

			// 确认日期选择
			confirmDate(e) {
				// 将时间戳转换为 yyyy-MM-dd 格式
				const date = new Date(e.value);
				const {year,month,day} = e;
				const formattedDate =
					`${year}-${month}-${day}`;
				this.showPicker = false;
				this.timeModal.date = formattedDate
				this.showDatePickerModal = false;
			},

			// 显示添加时段弹窗
			showTimeModal() {
				if (!this.dataForm.roomId) {
					uni.showToast({
						title: '请先选择会议室',
						icon: 'none'
					})
					return
				}

				this.timeModal.name = ''
				this.timeModal.date = ''
				this.timeModal.description = ''
				this.timeModal.show = true
			},

			// 确认添加时段
			confirmAddTime() {
				if (!this.timeModal.name) {
					uni.showToast({
						title: '请选择时段名称',
						icon: 'none'
					})
					return
				}

				if (!this.timeModal.date) {
					uni.showToast({
						title: '请选择日期',
						icon: 'none'
					})
					return
				}

				const selectedTime = this.roomtimesOptions.find(item => item.label === this.timeModal.name)
				if (!selectedTime) {
					uni.showToast({
						title: '时段数据有误',
						icon: 'none'
					})
					return
				}

				// 添加时段
				this.dataForm.roomTimes.push({
					Name: this.timeModal.name,
					ReserDate: this.timeModal.date,
					ReserBegTime: selectedTime.startTime,
					ReserEndTime: selectedTime.endTime,
					Description: this.timeModal.description
				})

				// 关闭弹窗
				this.timeModal.show = false

				// 更新价格
				this.updatePrice()

				uni.showToast({
					title: '添加时段成功',
					icon: 'success'
				})
			},

			// 删除时段
			removeTime(index) {
				uni.showModal({
					title: '删除时段',
					content: '确定要删除该预约时段吗？',
					success: (res) => {
						if (res.confirm) {
							this.dataForm.roomTimes.splice(index, 1)
							this.updatePrice()
							uni.showToast({
								title: '已删除',
								icon: 'success'
							})
						}
					}
				})
			},

			// 显示添加服务弹窗
			showServiceModal() {
				if (!this.dataForm.roomId) {
					uni.showToast({
						title: '请先选择会议室',
						icon: 'none'
					})
					return
				}

				this.selectedServices = this.dataForm.valueService.map(item => item.ServiceId)
				this.serviceModal.show = true
			},

			// 切换服务选择状态
			toggleServiceSelection(service) {
				const index = this.selectedServices.indexOf(service.Id)
				if (index > -1) {
					this.selectedServices.splice(index, 1)
				} else {
					this.selectedServices.push(service.Id)
				}
			},

			// 确认添加服务
			confirmAddService() {
				// 清除已有服务
				this.dataForm.valueService = []

				// 添加选中的服务
				this.selectedServices.forEach(id => {
					const service = this.serviceOptions.find(item => item.Id === id)
					if (service) {
						this.dataForm.valueService.push({
							ServiceId: service.Id,
							ServiceName: service.ServiceName,
							UnitPrice: service.UnitPrice,
							Description: service.Description,
							UnitNum: 1
						})
					}
				})

				// 更新服务价格
				this.updateServicePrice()

				// 关闭弹窗
				this.serviceModal.show = false

				uni.showToast({
					title: '添加服务成功',
					icon: 'success'
				})
			},

			// 删除服务
			removeService(index) {
				uni.showModal({
					title: '删除服务',
					content: '确定要删除该服务项目吗？',
					success: (res) => {
						if (res.confirm) {
							this.dataForm.valueService.splice(index, 1)
							this.updateServicePrice()
							uni.showToast({
								title: '已删除',
								icon: 'success'
							})
						}
					}
				})
			},

			// 更新会议室价格
			updatePrice() {
				// 如果没有计费规则或不是按时间计费，直接返回
				if (!this.costInfo || this.costInfo.CostType !== 1) return

				const basePrice = this.costInfo.Price || 0
				let totalPrice = 0

				this.dataForm.roomTimes.forEach(time => {
					if (time.ReserBegTime && time.ReserEndTime) {
						const beginParts = time.ReserBegTime.split(':')
						const endParts = time.ReserEndTime.split(':')

						const beginHour = parseInt(beginParts[0])
						const beginMinute = parseInt(beginParts[1])
						const endHour = parseInt(endParts[0])
						const endMinute = parseInt(endParts[1])

						// 计算时长（小时）
						const hours = (endHour - beginHour) + (endMinute - beginMinute) / 60

						// 按半小时计费，向上取整
						const halfHourUnits = Math.ceil(hours * 2)
						const timePrice = (basePrice / 2) * halfHourUnits

						totalPrice += timePrice
					}
				})

				this.dataForm.reserPrice = totalPrice
			},

			// 更新服务价格
			updateServicePrice() {
				let total = 0
				this.dataForm.valueService.forEach(service => {
					total += parseFloat(service.UnitPrice) * (service.UnitNum || 1)
				})
				this.dataForm.servicePrice = total
			},

			// 获取总价
			getTotalPrice() {
				return (parseFloat(this.dataForm.reserPrice) + parseFloat(this.dataForm.servicePrice)).toFixed(2)
			},

			// 格式化时间段
			formatTimeRange(timeItem) {
				if (!timeItem || !timeItem.ReserDate) return ''
				return `${timeItem.ReserDate} ${timeItem.ReserBegTime}-${timeItem.ReserEndTime}`
			},

			// 提交表单
			submitForm() {
				this.$refs.uForm.validate().then(valid => {
					if (valid) {
						// 验证必填项
						if (this.dataForm.roomTimes.length === 0) {
							uni.showToast({
								title: '请添加预约时段',
								icon: 'none'
							})
							return
						}
						if(!this.dataForm.nickName){
							uni.showToast({
								title: '请填写用户姓名',
								icon: 'none'
							})
							return
						}
						if(!this.dataForm.mobilephone){
							uni.showToast({
								title: '请填写联系电话',
								icon: 'none'
							})
							return
						}
						uni.showLoading({
							title: '提交中'
						})
						console.log(this.dataForm)
						if (!this.dataForm.id) {
							this.$u.api.createReserve(this.dataForm).then(res => {
								uni.hideLoading()
								const {
									code,
									data,
									msg
								} = res.data;
								if (code < 0) {
									this.$refs.uToast.show({
										type: "error",
										icon: false,
										title: msg
									});
								} else {
									this.$refs.uToast.show({
										type: "success",
										icon: false,
										title: "预约成功"
									});
									// 返回上一页
									setTimeout(() => {
										uni.navigateBack()
									}, 1500)
								}
							}).catch(err => {
								uni.hideLoading()
								uni.showToast({
									title: '提交失败，请重试',
									icon: 'none'
								})
							})
						} else {
							this.$u.api.updateReserve(this.dataForm).then(res => {
								uni.hideLoading()
								const {
									code,
									data,
									msg
								} = res.data;
								if (code < 0) {
									this.$refs.uToast.show({
										type: "error",
										icon: false,
										title: msg
									});
								} else {
									this.$refs.uToast.show({
										type: "success",
										icon: false,
										title: "预约成功"
									});
									// 返回上一页
									setTimeout(() => {
										uni.navigateBack()
									}, 1500)
								}
							}).catch(err => {
								uni.hideLoading()
								uni.showToast({
									title: '提交失败，请重试',
									icon: 'none'
								})
							})
						}

					}
				})
			},
			// 取消预约
			cancelReserve() {
				uni.showModal({
					title: '取消预约',
					content: '确定要取消此预约吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中'
							})
							this.$u.api.cancelReserve({id:this.dataForm.id}).then(res => {
								uni.hideLoading()
								this.getReserveDetail(this.dataForm.id)
								uni.showToast({
									title: '已取消预约',
									icon: 'success'
								})
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f7fa;
	}

	.add-form-container {
		padding-bottom: 140rpx;
	}

	.form-content {
		padding: 20rpx;
	}

	.form-section {
		margin-bottom: 30rpx;
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;

		.title-text {
			margin-left: 10rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #303133;
			flex: 1;
		}

		.title-action {
			margin-left: auto;
		}
	}

	.form-card {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding:0px 15px;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.time-list {
		.time-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.time-info {
				flex: 1;

				.time-name {
					font-size: 28rpx;
					font-weight: 500;
					color: #303133;
					margin-bottom: 8rpx;
				}

				.time-range {
					display: flex;
					align-items: center;

					.time-text {
						margin-left: 8rpx;
						font-size: 24rpx;
						color: #909399;
					}
				}
			}
		}
	}

	.service-list {
		.service-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.service-info {
				flex: 1;

				.service-name {
					font-size: 28rpx;
					font-weight: 500;
					color: #303133;
					margin-bottom: 10rpx;
				}

				.service-nums {
					display: flex;
					align-items: center;

					text {
						font-size: 24rpx;
						color: #909399;
						margin-right: 10rpx;
					}
				}
			}

			.service-actions {
				display: flex;
				align-items: center;

				.service-price {
					font-size: 28rpx;
					color: #ff9900;
					font-weight: 500;
					margin-right: 20rpx;
				}

				.remove-icon {
					padding: 10rpx;
				}
			}
		}
	}

	.empty-tip {
		padding: 30rpx 0;
		text-align: center;
		color: #909399;
		font-size: 26rpx;
	}

	.modal-form {
		padding: 20rpx 24rpx;

		.form-item {
			margin-bottom: 20rpx;

			.form-label {
				display: block;
				font-size: 28rpx;
				color: #606266;
				margin-bottom: 10rpx;
			}
		}
	}

	.service-select-list {
		max-height: 600rpx;
		overflow-y: auto;

		.service-select-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 10rpx;
			border-bottom: 1px solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			&.service-selected {
				background-color: rgba(41, 121, 255, 0.05);
			}

			.service-select-info {
				flex: 1;

				.service-select-name {
					font-size: 28rpx;
					color: #303133;
				}

				.service-select-desc {
					font-size: 24rpx;
					color: #909399;
					margin-top: 6rpx;
				}
			}

			.service-select-price {
				display: flex;
				align-items: center;

				text {
					font-size: 28rpx;
					color: #ff9900;
					margin-right: 10rpx;
				}
			}
		}
	}

	.bottom-action {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #ffffff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 9;

		.price-info {
			font-size: 28rpx;
			color: #606266;

			.total-price {
				font-size: 36rpx;
				color: #ff9900;
				font-weight: 600;
			}
		}

		.u-button {
			margin-left: 20rpx;
			width: 240rpx;
		}
	}

	.picker-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
        line-height:20px;
		// padding: 0 20rpx;
		border-radius: 8rpx;
	}

	.picker-text {
		font-size: 28rpx;
		color: #303133;

		&.placeholder {
			color: #c0c4cc;
		}
	}
</style>
